<template>
	<view :class="currentTheme">
		<index-header-color title="我的" :offsetTop="offsetTop" v-if="token">
			<view slot="content" class="u-margin-left-32 u-flex u-col-top u-flex-1 index-header-color" :style="loginForm.userType !='issue'?'height: 337rpx;':''">
				<item-image :img="loginForm.avatar" type="1" size="96" @click="changeAvatar"></item-image>
				<view class="u-margin-left-30 u-flex-1" >
					<view class="u-margin-bottom-18 u-flex"  @click="setting">
						<view class="u-font-30 text-black nickname u-line-1">
							{{loginForm.nickname}}
						</view>
						<view class="user-type-tag text-color-txtTheme" v-if="loginForm.clerkRole">{{loginForm.clerkRole==="DZ" ? '店长' : 'DM'}}</view>
            <view class="user-type-tag text-color-txtTheme" v-if="loginForm.userType==='store' && !loginForm.isClerk">{{'门店用户'}}</view>
						<view class="user-type-tag  text-color-txtTheme" v-if="!loginForm.clerkRole&&!loginForm.userType">游客用户</view>
						<view class="user-type-tag text-color-txtTheme" v-if="loginForm.userType && loginForm.userType == 'issue'">{{'发行用户'}}</view>
					</view>
					<view class="u-flex" v-if="loginForm.userType && loginForm.userType!='issue'"  @click="setting">
						<!-- <text class="u-font-24 u-margin-right-30 text-black u-flex" v-if="loginForm.storeName">{{loginForm.storeName}}</text> -->
						<text class="user-auth u-flex">
							信用分：{{loginForm.creditScore}}
						</text>
					</view>
					<view class="u-flex u-margin-top-20">
						<view class="u-position-relative u-font-24 text-white" @click="fans({noticeType:'storeFansGroup,issueFansGroup,dmFansGroup'})">
							<!-- 发行身份单独一个小红点 不是发行身份（店家，dm，店长一个小红点） -->
							<view class="notice" v-if="showRedNotice({noticeType:'issueFansGroup'})&&loginForm.userType==='issue'"></view>
							<template v-else>
								<view class="notice" v-if="showRedNotice({noticeType:'storeFansGroup,dmFansGroup'})"></view>
							</template>
							<!-- <view class="notice" v-if="showRedNotice({noticeType:'storeFansGroup,issueFansGroup,dmFansGroup'})"></view> -->
							<view class="u-flex">
								<text class="u-margin-right-16  text-color-txtTheme">我的粉丝团</text>
								<u-icon name="arrow-right" size="14" color="#765CFE"></u-icon>
							</view>
						</view>
						<!-- 发行和dm都没有我加入的粉丝团  -->
						<view class="u-position-relative u-font-24 text-white u-padding-left-60"  @click="follow" 
						v-if="loginForm.userType!='issue' && loginForm.clerkRole != 'DM'">
							<view class="u-flex">
								<text class="u-margin-right-16  text-color-txtTheme">我加入的粉丝团</text>
								<u-icon name="arrow-right" size="14" color="#765CFE"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</index-header-color>
		<a-nabbar :is-back="false" name="我的" v-if="!token" ></a-nabbar>
		<view class="u-padding-left-32 u-padding-right-32">
			<view v-if="token">
				<view  class="u-padding-top-22">
					<item-box padding="0">
						<view class="u-padding-top-50 u-padding-bottom-30">
							<item-number-list :list="labelNumberArr" @itemClick="getItemClick"></item-number-list>
						</view>
					</item-box>
				</view>
				<view class="u-padding-top-22" v-for="(item,index) in authArr" :key="index">
					<itemBox padding="0">
						<view v-for="(c,i) in item" :key="i" class="u-position-relative">
							<label-item :icon="c.icon" :name="c.label"  @click="goPath(c)"></label-item>
							<button open-type="contact"  v-if="c.label==='在线客服'" class="cantact"></button>
						</view>
					</itemBox>
				</view>
				<view class="logout-box" v-if="token">
					<item-btn block height="88" @click="logout">注销登录</item-btn>
				</view>
			</view>
			<view v-else class="u-margin-top-32" @click="myself">
				<item-box paddinglr="24">
					<view class="u-flex u-padding-top-30 u-padding-bottom-30 u-row-between">
						<view class="u-flex">
							<item-image type="1" size="100"></item-image>
							<text class="box-title content-desc-item u-margin-left-20">请登录</text>
						</view>
						<u-icon name="arrow-right" color="#333"></u-icon>
					</view>
				</item-box>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		getOssUrl
	} from "@/api/updataFile";
	import {
		settingUserInfo,
		thirdUserSet,
		updateUserType
	} from '@/api/user.js'
	import indexHeaderColor from '@/components/indexHeaderColor/indexHeaderColor.vue'
	import labelItem from './labelItem/labelItem.vue'
	import itemNumberList from '@/components/itemNumberList/itemNumberList.vue'
	export default {
		components: {
			indexHeaderColor,
			labelItem,
			itemNumberList
		},
		computed: {
			userType() {
				return this.loginForm.userType || 'store'
			},
			userTypeName() {
				let name = this.loginForm.userType == 'issue' ? '发行' : '门店'
				if (this.loginForm.userType === 'store' && this.loginForm.clerkRole) {
					name = this.isDM ? "DM" : "DZ"
				}
				return name
			},
			isDM() {
				return this.loginForm.clerkRole == "DM"
			},
			labelNumberArr() {
				if(this.userType){
					const {jumpCarCount,inCarCount,evaluationCount,driveCarCount,destroyedCount,fansGroupCount,intoFansGroupCount} = this.loginForm;
					let arr = {
						issue:[{
							count:driveCarCount,
							text:`已发车次`,
							// type:"completeCar"
						},{
							count:destroyedCount,
							text:`已毁车次`,
							// type:"cancelCar"
						}],
						store:[{
							count:inCarCount,
							text:`已上车次`,
							// type:"intoCar"
						},{
							count:jumpCarCount,
							text:`已跳车次`,
							// type:"outOffCar"
						},{
							count:evaluationCount,
							text:`已评测`,
							// type:"testCar"
						}]
					}[this.userType]
					// arr = [{
					// 	count:fansGroupCount,
					// 	text:`粉丝团|人数`,
					// 	type:"fans",
					// 	noticeType:'storeFansGroup,issueFansGroup,dmFansGroup'
					// },...arr]
					// if(this.userType!=='issue'){
					// 	arr.splice(1,0,{
					// 		count:intoFansGroupCount,
					// 		text:`已加入|粉丝团`,
					// 		type:"follow"
					// 	})
					// }
					return arr
				}
				return []
			},
			authArr() {
				if (!this.token) return [] //未登录返回空
				let arr = {
					store: [
						[{
							label: "收货地址",
							icon: 'shouhuodizhi',
							url: 'address',
							module: "pagesB"
						}, {
							label: "店家认证",
							icon: 'dianjiarenzheng',
							url: 'authPage',
							authType: 3
						}, {
							label: "开本资料",
							icon: 'shouhouziliao',
							url: 'afterSaleData',
							module: "pagesB"
						}, {
							label: "钱包",
							icon: 'qianbao',
							url: 'wallet',
							module: "pagesB"
						}],
						[{
							label: "账号设置",
							icon: 'zhanghaoshezhi',
							url: 'accout',
							module: "pagesB"
						}, {
							label: "门店设置",
							icon: 'mendianshezhi1',
							url: 'setting'
						}],
						[{
							label: "切换门店",
							icon: 'qiehuanmendian1',
							url: 'storeList',
							type: 'selectStore'
						}, {
							label: "切换身份",
							icon: 'qiehuanshenfen',
							type: "changeAuth",
						}],
						[{
							label: "评价管理",
							icon: 'daipingjia',
							url: 'storeReply',
							btnType: 'showDelete'
						}, {
							label: "意见反馈",
							icon: 'yijianfankui',
							url: 'userSubmit',
							type: 'feedback'
						}, {
							label: "在线客服",
							icon: 'zaixiankefu'
						}]
					],
					issue: [
						[{
							label: "钱包",
							icon: 'qianbao',
							url: 'wallet',
							module: "pagesB"
						}, {
							label: "发行设置",
							icon: 'fahangshezhi1',
							url: 'setting'
						}, {
							label: "账号设置",
							icon: 'zhanghaoshezhi',
							url: 'accout'
						}],
						[{
							label: "在线客服",
							icon: 'zaixiankefu'
						}, {
							label: "意见反馈",
							icon: 'yijianfankui',
							url: 'userSubmit',
							type: 'feedback'
						}],
						[{
							label: "收货地址",
							icon: 'shouhuodizhi',
							url: 'address',
							module: "pagesB"
						}, {
							label: "发行认证",
							icon: 'a-ruzhurenzheng',
							url: 'authPage',
							authType: 2
						}, {
							label: "切换身份",
							icon: 'qiehuanshenfen',
							type: "changeAuth"
						}]
					]
				} [this.userType];
				// 20211013 测试说好找问题 所以只有一个门店也显示切换门店
				if (this.loginForm.storeNumber == 0) {
					arr = arr.map(val => {
						val = val.filter(item=>val.label != '切换门店')
						return val
					})
				}
				if (![0, 3].includes(this.loginForm.userAuthenticate)) { //如果认证中或成功则隐藏该按钮
					arr = arr.map(val => {
						val = val.filter(item=>item.url != "authPage")
						return val
					}) //删除入驻认证
				}
				return arr
			}
		},
		data() {
			return {
				offsetTop: 0
			}
		},
		onShow() {
			if (this.token) {
				this.$store.dispatch("getInfo") //更新用户信息
			}
		},
		onPageScroll(e) {
			this.offsetTop = e.scrollTop
		},
		onLoad() {
			uni.$on('uAvatarCropper', path => {
				getOssUrl(path).then(({
					url
				}) => {
					thirdUserSet({
						avatar: url,
						uid: this.loginForm.uid
					}).then(res => {
						this.$store.dispatch("getInfo")
					})
				})
			})
		},
		onUnload() {
			uni.$off('uAvatarCropper')
		},
		methods: {
			// 跳转关注
			follow() {
				this.$u.route({
					url: '/pages/follow/index',
					params: {
						uid: this.loginForm.uid,
						userType: 'store',
					}
				})
			},
			// 跳转粉丝团
			fans(item) {
				this.itemClick(item) // 隐藏小红点
				this.$u.route({
					url: '/pagesA/fans/index',
					params: {
						type: '1',
					}
				})
			},
			// 跳转修改个人信息
			setting() {
				if (!this.token) {
					//未登录
					this.$u.route({
						url: '/pagesB/register/register'
					})
					return false;
				}
				if(this.loginForm.clerkRole=='DM' || this.loginForm.clerkRole=='DZ'){
					this.$u.route({
						url: '/pagesA/setting/selfSetting'
					})
				}
			},
			goItemPath(item) {
				this.loginValidate().then(res => {
					const url = item.label === '售后' ? '/pagesA/afterSale/afterSale' : '/pagesA/order/order'
					this.$u.route({
						url,
						params: item
					})
				})
			},
			setInfo(params) {
				settingUserInfo({
					...params,
					uid: this.loginForm.uid
				}).then(res => {
					this.$u.toast('修改成功')
					this.$store.dispatch('getInfo')
				})
			},
			myself() {
				if (!this.token) {
					//未登录
					this.$u.route({
						url: '/pagesB/register/register'
					})
					return false;
				}
				if (this.token && this.loginForm.isClerk) {
					this.$u.route({
						url: '/pagesA/setting/selfSetting'
					})
					return false;
				}
				//!this.loginForm.userType&&this.$u.route({url:'/pages/register/register'})
			},
			async goPath(item) {
				if (this[item.type]) {
					this[item.type](item)
					return false;
				}
				try {
					//如果是dm
					if (this.loginForm.clerkRole == 'DM') {
						if (["authPage"].includes(item.url)) {
							this.$u.toast('请先退出当前门店再认证')
							return false;
						}
						if (["setting"].includes(item.url)) {
							this.$u.toast('无权限，请联系店长或管理员修改')
							return false;
						}
					} else if (!['setting', 'accout', 'userSubmit', 'wallet','address'].includes(item.url)) {
						await this.planformValidate();
					}
					if (item.url) {
						this.$u.route({
							url: `/${item.module || 'pagesA'}/${item.url}/${item.url}`,
							params: item
						})
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			//修改头像
			changeAvatar() {
				if (!this.token) {
					//未登录
					this.$u.route({
						url: '/pagesB/register/register'
					})
					return false;
				}
				// 如果是店长或DM  进入个人信息页
				if(this.loginForm.clerkRole=='DM' || this.loginForm.clerkRole=='DZ'){
					this.$u.route({
						url: '/pagesA/setting/selfSetting'
					})
				}else{
					// 其他人直接换头像
					uni.chooseImage({
						count: 1,
						success(res) {
							const src = res.tempFilePaths[0];
							uni.navigateTo({
								url: '/pagesA/u-avatar-cropper/u-avatar-cropper?src=' + src
							})
						}
					});
				}
			},
			logout() {
				uni.showModal({
					content: '确认注销登录吗？',
					confirmText: "注销",
					title: '温馨提示',
					success: ({
						confirm
					}) => {
						if (confirm) {
							const keyList = uni.getStorageInfoSync().keys.filter(val=>val.indexOf('agreementFlag')===-1);
							keyList.forEach(key => uni.removeStorageSync(key));
							this.$store.dispatch('loginOut');
							//如果不是发行用户  然后已经点过授权了  清楚其他缓存的时候  保留这个数据
							// if(this.loginForm.userType!='issue' && flag==1){
							// 	// uni.clearStorageSync();
							// 	uni.setStorageSync('agreementFlag',1) // 1为已经点击
							// }else{
							// 	// uni.clearStorageSync();
							// }
							uni.reLaunch({
								url: '/pagesB/register/register'
							})
						}
					}
				})
			},
			//切换身份
			changeAuth() {
				this.$u.route({
					url: "/pagesA/changeAuth/changeAuth"
				})
			},
			//点击数字模块跳转
			getItemClick(item){
				this.goPath(item)
			},
			//跳转测本约车的历史列表
			carRouterChange(item){
				this.$u.route({
					url:'/pagesA/historyCarList/historyCarList',
					params:item
				})
			},
			//已发车次 别问我为什么这样调用过去调用过来 因为需要维持老函数的基础上统一写法
			completeCar(item){
				this.carRouterChange(item)
			},
			cancelCar(item){
				this.carRouterChange(item)
			},
			intoCar(item){
				this.carRouterChange(item)
			},
			outOffCar(item){
				this.carRouterChange(item)
			},
			testCar(item){
				this.goPath({
					label:"我的评测",
					icon:'reply',
					url:'replyManager',
					btnType:'showDelete',
					type:'myTestReply'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.user-type-tag{
		margin-left: 12rpx;
		font-size: 20rpx;
		border-radius: 50rpx;
		padding: 7rpx 20rpx;
		border: 1rpx solid var(--theme-color);
	}
	.logout-box {
		padding-top: 140rpx;
		padding-bottom: 60rpx;
	}

	// .pop-bg {
	// 	background-color: #302D41;
	// }

	// .pop-title {
	// 	line-height: 68rpx;
	// }

	// .pop-content {
	// 	height: 572rpx;
	// 	border: 1rpx solid transparentize($color: #ffffff, $amount: 0.9);
	// }

	// .button-getUserInfo {
	// 	left: 0;
	// 	right: 0;
	// 	top: 0;
	// 	bottom: 0;
	// 	opacity: 0;
	// }

	// .creditScore {
	// 	background: transparentize($color: #161324, $amount: 0.5);
	// 	border-radius: 17px;
	// 	padding: 0 10rpx;
	// }

	// .nickname {
	// 	white-space: nowrap;
	// 	overflow: hidden;
	// 	text-overflow: ellipsis;
	// 	max-width: 30vw;
	// }

	// .btn-style {
	// 	line-height: 88rpx;
	// 	text-align: center;
	// 	margin: 0 auto;
	// 	font-size: 26rpx;
	// 	border-radius: 50rpx;
	// 	background-color: #765CFE;
	// 	color: white;
	// 	margin: 80rpx 50rpx;
	// }

	// .fensi {
	// 	.fansleft {
	// 		width: 1rpx;
	// 		height: 81rpx;
	// 		background: white;
	// 		opacity: 0.2;
	// 		margin-right: 39rpx;
	// 	}
	// }

	// .storeFan {

	// 	.text {
	// 		background: #161324;
	// 		height: 46rpx;
	// 		border-radius: 40rpx;
	// 		padding: 10rpx 16rpx;
	// 		min-width: 172rpx;

	// 		span {
	// 			color: #B0B2D8;
	// 			margin-right: 10rpx;
	// 		}

	// 	}

	// 	.u-avatar {
	// 		margin-left: -20px;
	// 	}
	// }
	.cantact{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		opacity: 0;
	}
	.user-auth{
		color: white;
		font-size: 20rpx;
		padding: 4rpx 12rpx;
		text-align: center;
		border-radius: 30px;
		line-height: 1;
		background: var(--theme-color);
	}
	.notice{
		left: -20rpx;
		right: auto;
	}
	
	/deep/ .index-header-color {// 登录状态
	padding-top: 186rpx;
	// display: flex;
	// flex-direction: column;
	// justify-content: flex-end;
	// height: 610rpx;
	height: 308rpx;
}
</style>
